<template>
  <div class="test">
    <!--<div class="process-box">-->
    <!--<div class="process-bar" ref="process">-->
    <!--</div>-->
    <!--</div>-->
    <div class="img-box" ref="html">
      <img :src="imgSrc" v-if="imgSrc">
      <img src="../assets/img/list-img1.png" v-if="!imgSrc" id="cropimg">
    </div>
    <div class="up-box">
      <input type="file" id="file" @change="uploadImg($event)"/>
      <div>上传图片</div>
    </div>
    <ul>
      <li v-for="(item,index) in list" :key="index" v-if="item.show">
        {{item.countDown.days}}天{{item.countDown.hours}}小时{{item.countDown.minutes}}分钟{{item.countDown.seconds}}秒
      </li>
    </ul>
    <!--<div class="swiper-box" >-->
    <!--<swiper :options="swiperOption" ref="mySwiper">-->
    <!--<swiper-slide class="swiper-slider"><img src="../assets/img/list-img1.png"></swiper-slide>-->
    <!--<swiper-slide class="swiper-slider"><img src="../assets/img/beauty.jpg"></swiper-slide>-->
    <!--</swiper>-->
    <!--&lt;!&ndash;<div class="swiper-button-next"></div>&ndash;&gt;-->
    <!--&lt;!&ndash;<div class="swiper-button-prev"></div>&ndash;&gt;-->
    <!--<div class="swiper-pagination"></div>-->
    <!--</div>-->
    <div class="html-to-canvas" @click="htmlTocanvas">拍照</div>
    <div class="cropperImg" @click="cropperImg">截图</div>
    <img :src="htmlUrl">
  </div>
</template>
<script>
  import untils from '../assets/untils/untils'
  import {mapState, mapMutations, mapGetters, mapActions} from 'vuex';
  import {swiper, swiperSlide} from 'vue-awesome-swiper';
  import html2canvas from 'html2canvas';
  import '../assets/lib/crop/cropper.css'
  // import Cropper from 'cropperjs'

  export default {
    data() {
      return {
        htmlUrl: '',
        num: 80,
        imgSrc: '',
        fromTime: '2018/12/26 16:20:00',
        currentTime: '2018/10/26 16:20:05',
        countDown: {
          days: 0,
          hours: 0,
          minutes: 0,
          seconds: 0
        },
        list: [
          {
            fromTime: '2018/12/26 16:20:05',
            currentTime: '2018/12/26 16:20:00',
            countDown: {
              days: 0,
              hours: 0,
              minutes: 0,
              seconds: 0
            },
            show: true

          },
          {
            fromTime: '2018/11/25 13:00:00',
            currentTime: '2018/10/26 16:20:00',
            countDown: {
              days: 0,
              hours: 0,
              minutes: 0,
              seconds: 0
            },
            show: true

          }
        ],
        swiperOption: {
          height: 200,
          speed: 500,//切换速度
          watchOverflow: true, //当没有足够的slide切换时，例如只有1个slide（非loop），swiper会失效且隐藏导航等。默认不开启这个功能。
          loop: false,//开启循环模式
          slidesPerView: 1,
          spaceBetween: 30,
          preventClicksPropagation: true,//阻止click冒泡。拖动Swiper时阻止click事件。
          simulateTouch: false,//鼠标模拟手机触摸。默认为true，Swiper接受鼠标点击、拖动。
          pagination: {
            el: '.swiper-pagination',
          },
          navigation: {
            nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
            prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
            hideOnClick: true, //点击slide时显示/隐藏按钮
            disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。
            hiddenClass: 'my-button-hidden', //按钮隐藏时的Class
          },
          on: {
            tap: () => {
              let swiper = this.$refs.mySwiper.swiper;
              let i = swiper.activeIndex;
              console.log(i)
              // let flag = this.imgList[i];
              // location.href = flag.url;
            }
          }
        },
        cropper: ''
      }
    },
    mounted() {
      this.list.forEach((item, index) => {
        var obj = untils.returnDate(item.currentTime, item.fromTime);
        item.countDown.days = obj.days;
        item.countDown.hours = obj.hours;
        item.countDown.minutes = obj.minutes;
        item.countDown.seconds = obj.seconds;
        untils.countDown(item.currentTime, item.fromTime, (obj) => {
          item.countDown = obj;
          item.countDown.days = obj.days;
          item.countDown.hours = obj.hours;
          item.countDown.minutes = obj.minutes;
          item.countDown.seconds = obj.seconds;
          item.show = obj.show;
        });
        this.getCropper()

      });

    },
    methods: {
      uploadImg(ev) {
        untils.upLoadImg(ev, (url) => {
          untils.zipImg(url, {
            width: 300,
            height: 200,
            quality: 1
          }, (res) => {
            this.imgSrc = res;
          })
        })
      },
      htmlTocanvas() {
        var _this = this;
        var shareContent = this.$refs.html;//需要截图的包裹的（原生的）DOM 对象
        console.log(shareContent);
        var width = shareContent.offsetWidth; //获取dom 宽度
        var height = shareContent.offsetHeight; //获取dom 高度
        var canvas = document.createElement("canvas"); //创建一个canvas节点
        var scale = 1; //定义任意放大倍数 支持小数
        canvas.width = width * scale; //定义canvas 宽度 * 缩放
        canvas.height = height * scale; //定义canvas高度 *缩放
        canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
        var opts = {
          scale: scale, // 添加的scale 参数
          canvas: canvas, //自定义 canvas
          logging: false, //日志开关，便于查看html2canvas的内部执行流程
          width: width, //dom 原始宽度
          height: height,
          useCORS: true //【重要】开启跨域配置
        };
        html2canvas(shareContent, opts).then(function (canvas) {
          console.log(canvas.toDataURL());
          _this.htmlUrl = canvas.toDataURL()
        });
      },
      getCropper() {
        untils.loadAsycJs('CROPPER', '/static/crop/cropper.js', () => {
          setTimeout(() => {
            var image = document.querySelector('#cropimg');
            var minAspectRatio = 0.5;
            var maxAspectRatio = 1.5;
            try {
              this.cropper = new Cropper(image, {
                aspectRatio: 1 / 1,
                viewMode: 1,
                ready: function () {
                  // croppable = true;
                },
                zoomable: true,
                cropBoxMovable: true,
                autoCrop: true,
                toggleDragModeOnDblclick: true,
                background: true,
                zoomOnTouch: true
              });
            } catch (e) {

            }
          }, 300)

        })


      },
      cropperImg() {
        console.log(this.cropper)
        let croppedCanvas = this.cropper.getCroppedCanvas();
        let roundedCanvas = this.getRoundedCanvas(croppedCanvas);
        this.htmlUrl = roundedCanvas.toDataURL();
      },
      getRoundedCanvas(sourceCanvas) {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        var width = sourceCanvas.width;
        var height = sourceCanvas.height;
        canvas.width = width;
        canvas.height = height;
        context.imageSmoothingEnabled = true;
        context.drawImage(sourceCanvas, 0, 0, width, height);
        context.globalCompositeOperation = 'destination-in';
        context.beginPath();
        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
        context.fill();
        return canvas;
      },
    },
    components: {
      swiper, swiperSlide
    },
    computed: {
      ...mapGetters(['headStatus'])
    }
  }
</script>
<style>
  .swiper-box {
    margin-top: 20px;
  }

  .test {
    /*position: absolute;*/
    left: 0;
    top: 30px;
  }

  .process-box {
    width: 98%;
    height: 40px;
    border: 1px solid red;
  }

  .process-bar {
    background: red;
    height: 40px;
    width: 0;
    transition: all 1s linear;
  }

  .up-box {
    position: relative;
  }

  #file {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
  }

  .img-box {
    width: 100%;
    height: 200px;
  }

  .img-box img {
    width: 100%;
    height: 200px;
  }

  .swiper-slider {
    width: 100%;
    height: 200px;
  }

  .swiper-slider img {
    width: 100%;
    height: 200px;
  }

  .html-to-canvas {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #f2f4f5;
  }

</style>
